<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      var arr = [
        { id: '29', pid: '', name: '总裁办' },
        { id: '2c', pid: '', name: '财务部' },
        { id: '2d', pid: '2c', name: '财务核算部' },
        { id: '2f', pid: '2c', name: '薪资管理部' },
        { id: 'd2', pid: '', name: '技术部' },
        { id: 'd3', pid: 'd2', name: 'Java研发部' },
        { id: 'd31', pid: 'd3', name: 'Java研发部333' },
        { id: 'd33', pid: 'd3', name: 'Java研发部333' },
      ];
      // id 是每个对象都有的基本属性
      // pid 就是标识当前元素的父亲是谁（是所有对象里面 查找他自己的父元素的一个属性）

      // 将平铺结构，转换为树形结构 ---- 需求
      //  你的树形结构，有哪些顶级的元素 --- 在我们这个案例里面，pid=== '' 就是顶级元素，一共三个
      function transformListToTree(list, rootPid) {
        const newArr = [];
        list.forEach((item) => {
          // { id: '2d', pid: '2c', name: '财务核算部' },
          if (item.pid === rootPid) {
            // item.children = [];
            // { id: '29', pid: '', name: '总裁办' },
            // { id: '2c', pid: '', name: '财务部' },
            // { id: 'd2', pid: '', name: '技术部' }
            // 这里为什么要传递 item.id 呢， 因为我们是用这个 元素的id当做 其他元素的父亲，
            // 去查找这个元素的子元素的，这里传递id，再次进入递归函数以后，就用用 其他元素的pid和这个id进行对比
            item.children = transformListToTree(list, item.id);
            newArr.push(item);
          }
        });
        // { id: '2d', pid: '2c', name: '财务核算部' }
        return newArr;
      }

      console.log(transformListToTree(arr, ''));
    </script>
  </body>
</html>
